<template>
 <view>
  <view class="community">
   <view class="community_title">
    <view class="title_inner">
        <uni-segmented-control
        :current="current"
        :values="items.map(v=>v.title)" 
        @clickItem="onClickItem" 
        style-type="text" 
        active-color="#51c4d3">
        </uni-segmented-control>
    </view>
    <view class="iconfont iconsearch"></view>
   </view>
   <view class="community_content">
    <view v-if="current===0">
     <The-newest></The-newest>
    </view>
    <view v-if="current===1">
     <The-topic></The-topic>
    </view>
    <view v-if="current===2">
     <The-Community></The-Community>
    </view>
   </view>
  </view>
 </view>
</template>

<script>
 import theNewest from "./The-newest/index";
 import theTopic from "./The-topic/index";
 import theCommunity from "./The-Community/index";
 import {uniSegmentedControl} from '@dcloudio/uni-ui'
 export default
 {
  components:
  {
   theNewest,
   theTopic,
   theCommunity,
   uniSegmentedControl
  },
  data()
  {
   return{
    items:[
     {title:"最新"},
     {title:"话题"},
     {title:"社群"},
    ],
    current : 0
   };
  },
  methods:
  {
   onClickItem(e){
    if(this.current !== e.currentIndex)
    {
     this.current=e.currentIndex;
    }
   }
  }
 };
</script>

<style lang="scss">
 .community{
  .community_title{
      position: relative;
      width:60%;
      margin:0 auto;
      font-size: 10px;
   .titleinner{ 
    width:60%;
    margin:0 auto;
    font-size: 10px;
   }
   .iconsearch{
    position: absolute;
    top: 50%;
    transform:translateY(-50%);
    right:5%;
   }
  }
 }
</style>